<template>
  <!--图标文本按钮-->
  <div v-if="widget.category === 'iconTextButton'"
       :style="{'justify-content': textStyle.justifyContent}"
       class="position-full flex-center">
    <p class="iconfont" :style="{...iconStyle}" v-if="state.values.icon">{{icon}}</p>
    <pre v-if="text" :style="{ ...textStyle}">{{text}}</pre>
  </div>
  <!--图标按钮-->
  <div v-else
       class="position-full button-cont">
    <p class="iconfont" :style="{...iconStyle}" v-if="state.values.icon">{{icon}}</p>
  </div>
</template>

<script>
  import {transStrToHtmlDecode, formatColor} from '@/utils';
  import {mapState} from 'vuex';
  import {WidgetIconTextButton} from "@/modules/IDE/widget/atom/widgetIconTextButton";

  export default {
    name: 'IconTextButton',
    props: {
      widget: {
        type: WidgetIconTextButton,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      textStyle() {
        const {textStyle = {}} = this.state;
        const textStyles = {};
        // 字体
        const {size: fSize, color, weight, align} = textStyle;
        fSize && (textStyles.fontSize = `${fSize}px`);
        color && (textStyles.color = formatColor(color, this.activeTheme));
        weight && (textStyles.fontWeight = weight);
	      switch (align) {
		      case 'center':
			      textStyles.justifyContent = 'center';
			      break;
		      case 'left':
			      textStyles.justifyContent = 'flex-start';
			      break;
		      case 'right':
			      textStyles.justifyContent = 'flex-end';
			      break;
		      default:
			      textStyles.justifyContent = 'center';
			      break;
	      }
        return textStyles;
      },
      iconStyle() {
        const {iconStyle = {}} = this.state;
        const iconStyles = {};
        // 字体
        const {size: fSize, color} = iconStyle;
        fSize && (iconStyles.fontSize = `${fSize}px`);
        color && (iconStyles.color = formatColor(color, this.activeTheme));
        return iconStyles;
      },
      icon() {
        const {values = {}} = this.state;
        const {icon = ''} = values;
        return transStrToHtmlDecode(`&#x${icon};`);
      },
      text() {
        const {values = {}} = this.state;
        const {text = ''} = values;
        return text
      }
    },
  };
</script>

<style scoped>
  .button-cont {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  p {
    margin: 0;
  }

  .flex-center {
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 5px;
  }

  pre {
    margin: 0;
    font-size: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
  }
</style>
